<template>
	<view class="custom-tabbar">
		<u-tabbar
			:value="value"
			:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="消息" @click="goJumpTo('pages/chat/list/index')">
          <template #active-icon>
            <image  class="TabItemICon" src="../../static/icon/MessageBlue.svg"></image>
      	  </template>

          <template #inactive-icon>
            <image class="TabItemICon" src="../../static/icon/message.svg"></image>
          </template>
      </u-tabbar-item>
			<u-tabbar-item text="动态" @click="goJumpTo('pages/dynamics/home/index')">
          <template #active-icon>
            <image style="padding-top: 2px;" class="tabbar-icon" src="../../static/icon/DynamicBlue.svg"></image>
      	  </template>

          <template #inactive-icon>
            <image style="padding-top: 2px;" class="tabbar-icon" src="../../static/icon/dynamics.svg"></image>
          </template>
      </u-tabbar-item>

			<u-tabbar-item text="工作台" @click="goJumpTo('pages/workspace/home/index')">
          <template #active-icon>
            <image style="padding-top: 2px;" class="tabbar-icon" src="../../static/icon/WorkbenchBlue.svg"></image>
      	  </template>

          <template #inactive-icon>
            <image style="padding-top: 2px;" class="tabbar-icon" src="../../static/icon/workbenches.svg"></image>
          </template>
      </u-tabbar-item>

	    <u-tabbar-item  text="通讯录" @click="goJumpTo('pages/addressBook/home/index')"> 
          <template #active-icon>
            <image style="padding-top: 2px;" class="tabbar-icon" src="../../static/icon/AddressBookBlue.svg"></image>
      	  </template>

          <template #inactive-icon>
            <image style="padding-top: 2px;" class="tabbar-icon" src="../../static/icon/addressbook.svg"></image>
          </template>
      </u-tabbar-item> 
			<u-tabbar-item text="我的"  @click="goJumpTo('pages/user/userHome')">
          <template #active-icon>
            <image  class="MyTabItenIcon" src="../../static/icon/MyBlue.svg"></image>
      	  </template>

          <template #inactive-icon>
            <image class="MyTabItenIcon" src="../../static/icon/my.svg"></image>
          </template>
      </u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: 'tabbar',
		props: {
			value: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				height: 0,
				show: false,
			};
		},
		mounted() {
		},
		methods: {
			goJumpTo(link) {
				let pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route;
				if(link == currentRoute) return;
				
				// 跳转页面
				uni.switchTab({
					url: `/${link}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.tabbar-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 4rpx;
    
	}
  // 消息图标
  .TabItemICon{
    padding-top: 3px;
    width: 1rem;
    height: 1rem;
  }
  // 我的图标
  .MyTabItenIcon{
    padding-top: 3px;
    width: 1.1rem;
    height: 1.1rem;
  }
	.menu-container {
		padding: 0 20rpx;
	}
	.menu-card {
		margin-top: 24rpx;
		 background-color: #fff;
		 border-radius: 16rpx;
		 padding: 20rpx;
		 .card-title {
			 font-size: 28rpx;
			 font-weight: 550;
			 margin-bottom: 18rpx;
		 }
		 .card-menu {
			 display: flex;
			 flex-wrap: wrap;
		 }
		 .work-space .menu-item {
			 margin-bottom: 24rpx;
		 }
		 .menu-item {
			 text-align: center;
			 font-size: 24rpx;
			 width: 25%;
			 image {
				 width: 86rpx;
				 height: 86rpx;
			 }
		 }
	}


</style>
